<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head th:replace="/aceAdminLayout/FunctionSetting :: header">

        <title>菜单管理</title>
        <script th:src="@{../../static/iframeResizer/iframeResizer.contentWindow.min.js}"></script>

    </head>

    <body class="no-skin"  style="margin:0;padding:0;overflow:hidden;background-color: white" scroll="no">

        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-12" style="box-shadow: 0px 0px 10px 5px #fcfcfc;border-radius:20px; padding: 10px 10px 10px 10px;border:1px solid #000">
                    <div class="col-xs-3">
                        菜单名称： <input type="text" id="SelectRoleName">
                    </div>
                    <div class="col-xs-3">
                        菜单状态： <input type="text" id="SelectRoleKey">
                    </div>
                    <div class="col-xs-3">
                        <button class="btn btn-sm btn-success">
                            <i class="fa fa-search">
                            </i>
                            &nbsp;搜索
                        </button>
                        <button class="btn btn-sm btn-warning">
                            <i class="fa fa-refresh">
                            </i>
                            &nbsp;重置
                        </button>
                        </select>
                    </div>
                </div>
            </div>

            <!--中间自定义的页面开始-->
            </br>
            <div class="row">
                <table id="demo"></table>
            </div>

            <!--模态框修改弹窗-->
            <div class="modal fade" id="menusexampleModal" tabindex="-1" role="dialog" aria-labelledby="menusModal" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="menusModal">修改菜单</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="menuId" class="col-form-label">菜单ID:</label>
                                    <textarea type="text" class="form-control" id="menuId" name="menuId" disabled="disabled"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="menuName" class="col-form-label">菜单名称:</label>
                                    <textarea class="form-control" id="menuName" name="menuName"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="parentId" class="col-form-label">父菜单ID:</label>
                                    <textarea class="form-control" name="parentId" id="parentId" disabled="disabled"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="orderNum" class="col-form-label">显示顺序:</label>
                                    <textarea class="loginName" id="orderNum" name="orderNum" ></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="url" class="col-form-label">请求地址:</label>
                                    <textarea class="form-control" id="url" name="url" ></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="target" class="col-form-label">打开方式:</label>
                                    <textarea class="form-control" id="target" name="target" placeholder="打开方式（menuItem页签 menuBlank新窗口）"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="menuType" class="col-form-label">菜单类型:</label>
                                    <textarea class="form-control" id="menuType" name="menuType" placeholder="菜单类型（M目录 C菜单 F按钮）"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="visible" class="col-form-label">菜单状态:</label>
                                    <textarea class="form-control" id="visible" name="visible" placeholder="菜单状态（0显示 1隐藏）"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="perms" class="col-form-label">权限标识:</label>
                                    <textarea class="form-control" id="perms" name="perms"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="icon" class="col-form-label">菜单图标:</label>
                                    <textarea class="form-control" id="icon" name="icon" placeholder="字符串"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="createBy" class="col-form-label">创建者:</label>
                                    <textarea class="form-control" id="createBy" name="createBy"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="updateBy" class="col-form-label">更新者:</label>
                                    <textarea class="form-control" id="updateBy" name="updateBy"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="remark" class="col-form-label">备注:</label>
                                    <textarea class="form-control" id="remark" name="remark"></textarea>
                                </div>
                            </form>
                            <div class="modal-footer">

                                <button type="button" class="btn btn-white btn-warning" data-dismiss="modal" onclick="backIndex()"><i class="ace-icon fa fa-reply icon-only"></i>返回</button>
                                <button type="button" id="GoUpdate"  class="btn btn-white btn-info" value="submit"><i class="ace-icon fa fa-check">
                                </i>提交</button>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </tr>
            <!--模态框修改弹窗结束-->


            <!--模态框add的弹窗-->
            <div class="modal fade" id="addmenusexampleModal" tabindex="-1" role="dialog" aria-labelledby="addmenusModal" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addmenusModal">为角色增加菜单</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="addroleId" class="col-form-label">角色ID:</label>
                                    <textarea type="text" class="form-control" id="addroleId" name="addroleId" onkeyup="value=value.replace(/[^\d|^\n\r]/g,'');"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="menuId" class="col-form-label">菜单ID:</label>
                                    <textarea type="text" class="form-control" id="addmenuId" name="addmenuId" onkeyup="value=value.replace(/[^\d|^\n\r]/g,'');"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="menuName" class="col-form-label">菜单名称:</label>
                                    <textarea class="form-control" id="addmenuName" name="addmenuName"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="parentId" class="col-form-label">父菜单ID:</label>
                                    <textarea class="form-control" name="addparentId" id="addparentId" onkeyup="value=value.replace(/[^\d|^\n\r]/g,'');"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="orderNum" class="col-form-label">显示顺序:</label>
                                    <textarea class="loginName" id="addorderNum" name="addorderNum"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="url" class="col-form-label">请求地址:</label>
                                    <textarea class="form-control" id="addurl" name="addurl"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="target" class="col-form-label">打开方式:</label>
                                    <textarea class="form-control" id="addtarget" name="addtarget" placeholder="打开方式（menuItem页签 menuBlank新窗口）"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="menuType" class="col-form-label">菜单类型:</label>
                                    <textarea class="form-control" id="addmenuType" name="addmenuType" placeholder="菜单类型（M目录 C菜单 F按钮）"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="visible" class="col-form-label">菜单状态:</label>
                                    <textarea class="form-control" id="addvisible" name="addvisible" placeholder="菜单状态（0显示 1隐藏）"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="perms" class="col-form-label">权限标识:</label>
                                    <textarea class="form-control" id="addperms" name="addperms"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="icon" class="col-form-label">菜单图标:</label>
                                    <textarea class="form-control" id="addicon" name="addicon" placeholder="字符串"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="createBy" class="col-form-label">创建者:</label>
                                    <textarea class="form-control" id="addcreateBy" name="addcreateBy"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="updateBy" class="col-form-label">更新者:</label>
                                    <textarea class="form-control" id="addupdateBy" name="addupdateBy"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="remark" class="col-form-label">备注:</label>
                                    <textarea class="form-control" id="addremark" name="addremark"></textarea>
                                </div>
                            </form>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-white btn-warning" data-dismiss="modal" onclick="backIndex()"><i class="ace-icon fa fa-reply icon-only"></i>返回</button>
                                <button type="button" id="GoToAddMenu" class="btn btn-white btn-info" value="submit"><i class="ace-icon fa fa-check">
                                </i>提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--模态框add的弹窗结束-->

        </div>
        <!--中间自定义的页面结束-->
        <div th:include="/aceAdminLayout/FunctionSetting.html :: footerJs"></div><!--页脚Js-->
        <script type="text/javascript">
            $('#demo').bootstrapTable({
                url: '/system/sysmenu/bootStrapTableTree',
                method: 'post',
                striped: true, //是否显示行间隔色
                detailView: true,//父子表
                sidePagination: "client",
                queryParams: { parentId: '0' },
                ajaxOptions: { parentId: '0' },
                columns: [{
                    field: 'menuId',
                    width: '10%',
                    title: 'ID',
                    visible: false
                },{
                    title: '菜单名称',
                    field: 'menuName',
                    width: '10%',
                    formatter: function(value, row, index) {
                        if (row.icon===""||row.icon===undefined) {
                            return row.menuName;
                        } else {
                            return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.menuName + '</span>';
                        }
                    }
                }, {
                    field: 'orderNum',
                    width: '5%',
                    title: '显示顺序'
                },{
                    field: 'parentId',
                    title: '父级菜单',
                    visible: false
                },{
                    field: 'url',
                    width: '5%',
                    title: '请求地址',
                },{
                    title: '类型',
                    field: 'menuType',
                    width: '5%',
                    align: "left",
                    formatter: function(value, item, index) {
                        if (item.menuType == 'M') {
                            return '<span class="label label-success">目录</span>';
                        }
                        else if (item.menuType == 'C') {
                            return '<span class="label label-primary">菜单</span>';
                        }
                        else if (item.menuType == 'F') {
                            return '<span class="label label-warning">按钮</span>';
                        }
                    }
                }, {
                    field: 'visible',
                    title: '可见',
                    width: '3%',
                    align: "left",
                    formatter: function(value, row, index) {
                        if (row.visible === '0')
                            return '<span class="label label-success arrowed">显示</span>';
                        else
                            return '';
                    }
                }, {
                    field: 'perms',
                    title: '权限标识',
                    width: '10%',
                    align: "left"
                },
                    {
                        title: '操作',
                        width: '30%',
                        align: "center",
                        formatter: function(value, row, index) {
                            return "     <div class=\"menu-group-remove\" style=\"display: inline-block;visibility: hidden;\">\n" +
                                "                                                    <a th:href=\"@{'/system/sysmenu/removeByd/'+"+row.menuId+"}\">\n" +
                                "                                                        <button class=\"btn btn-xs btn-danger\">\n" +
                                "                                                            <i class=\"ace-icon fa fa-trash-o bigger-120\"></i>\n" +
                                "                                                        </button>\n" +
                                "                                                    </a>\n" +
                                "                                                </div>\n" +
                                "\n" +
                                "                                                <div class=\"menu-group-add\" style=\"display: inline-block;visibility: hidden;\">\n" +
                                "                                                    <button class=\"btn btn-xs btn-info\" data-toggle=\"modal\" data-target=\"#addmenusexampleModal\" data-whatever=\"@fat\">\n" +
                                "                                                        添加 \n" +
                                "                                                    </button>\n" +
                                "                                                </div>\n" +
                                "\n" +
                                "                                                <div class=\"menu-group-update\" style=\"display: inline-block;visibility: hidden;\">\n" +
                                "                                                    <button class=\"btn btn-xs btn-info\" data-toggle=\"modal\" data-target=\"#menusexampleModal\" data-whatever=\""+row.menuId+"\">\n" +
                                "                                                        修改\n" +
                                "                                                    </button>\n" +
                                "                                                </div>";
                        }
                    },],
                onExpandRow: function (index, row, $detail) {

                    InitSubTable(index, row, $detail);

                },
                onLoadSuccess: function (res) {//可不写
                    //加载成功时
                    getButton();
                }, onLoadError: function (statusCode) {
                    return "加载失败了"
                }, formatLoadingMessage: function () {
                    //正在加载
                    return "拼命加载中...";
                }, formatNoMatches: function () {
                    //没有匹配的结果
                    return '无符合条件的记录';
                }
            })
            InitSubTable = function(index, row, $detail) {
                var parentId = row.menuId;
                var cur_table = $detail.html('<table></table>').find('table');
                $(cur_table).bootstrapTable({
                    url: '/system/sysmenu/bootStrapTableTree',
                    method: 'post',
                    queryParams: { parentId: parentId },
                    ajaxOptions: { parentId: parentId },
                    clickToSelect: true,
                    detailView: true,//父子表
                    uniqueId: "menuId",
                    columns: [{
                        field: 'menuId',
                        width: '10%',
                        title: 'ID',
                        visible: false
                    },{
                        field: 'menuName',
                        width: '10%',
                        formatter: function(value, row, index) {
                            if (row.icon===""||row.icon===undefined) {
                                return row.menuName;
                            } else {
                                return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.menuName + '</span>';
                            }
                        }
                    }, {
                        field: 'orderNum',
                        width: '5%',
                    },{
                        field: 'parentId',
                        title: '父级菜单',
                        visible: false
                    },{
                        field: 'url',
                        width: '5%',
                    },{
                        field: 'menuType',
                        width: '5%',
                        align: "left",
                        formatter: function(value, item, index) {
                            if (item.menuType == 'M') {
                                return '<span class="label label-success">目录</span>';
                            }
                            else if (item.menuType == 'C') {
                                return '<span class="label label-primary">菜单</span>';
                            }
                            else if (item.menuType == 'F') {
                                return '<span class="label label-warning">按钮</span>';
                            }
                        }
                    }, {
                        field: 'visible',
                        width: '3%',
                        align: "left",
                        formatter: function(value, row, index) {
                            if (row.visible === '0')
                                return '<span class="label label-success arrowed">显示</span>';
                            else
                                return '';
                        }
                    }, {
                        field: 'perms',
                        width: '10%',
                        align: "left"
                    },    {
                        title: '操作',
                        width: '30%',
                        align: "center",
                        formatter: function(value, row, index) {
                            return "     <div class=\"menu-group-remove\" style=\"display: inline-block;visibility: hidden;\">\n" +
                                "                                                    <a th:href=\"@{'/system/sysmenu/removeByd/'+"+row.menuId+"}\">\n" +
                                "                                                        <button class=\"btn btn-xs btn-danger\">\n" +
                                "                                                            <i class=\"ace-icon fa fa-trash-o bigger-120\"></i>\n" +
                                "                                                        </button>\n" +
                                "                                                    </a>\n" +
                                "                                                </div>\n" +
                                "\n" +
                                "                                                <div class=\"menu-group-add\" style=\"display: inline-block;visibility: hidden;\">\n" +
                                "                                                    <button class=\"btn btn-xs btn-info\" data-toggle=\"modal\" data-target=\"#addmenusexampleModal\" data-whatever=\"@fat\">\n" +
                                "                                                        添加 \n" +
                                "                                                    </button>\n" +
                                "                                                </div>\n" +
                                "\n" +
                                "                                                <div class=\"menu-group-update\" style=\"display: inline-block;visibility: hidden;\">\n" +
                                "                                                    <button class=\"btn btn-xs btn-info\" data-toggle=\"modal\" data-target=\"#menusexampleModal\" data-whatever=\""+row.menuId+"\">\n" +
                                "                                                        修改\n" +
                                "                                                    </button>\n" +
                                "                                                </div>";
                        }
                    },],
                    //无线循环取子表，直到子表里面没有记录
                    onExpandRow: function (index, row, $detail) {
                        InitSubTable(index, row, $detail);
                    }, onLoadSuccess: function (res) {//可不写
                        //加载成功时
                        getButton();
                        console.log(res);
                    }, onLoadError: function (statusCode) {
                        return "加载失败了"
                    }, formatLoadingMessage: function () {
                        //正在加载
                        return "拼命加载中...";
                    }, formatNoMatches: function () {
                        //没有匹配的结果
                        return '无符合条件的记录';
                    }
                });
            };

        </script>

        <!--返回跳转-->
        <script>
            function backIndex(){
                window.location.href="/system/sysuser/getAllUser"
            }
        </script>
        <!--修改值时，页面弹框获取后端的值-->
        <script>
            $('#menusexampleModal').on('show.bs.modal', function (event){
                var button = $(event.relatedTarget);
                var id = button.data('whatever');
                console.log("assssssssssssssssssssssssssssssssssssssssss"+id)
                var modal = $(this);
                $.ajax({
                    url: "/system/sysmenu/getOneMenu/"+id,
                    type: "get",
                    dataType: "json",
                    success: function (date){
                        modal.find(' #menuId' ).val(date.menuId);
                        modal.find(' #menuName' ).val(date.menuName);
                        modal.find(' #parentId' ).val(date.parentId);
                        modal.find(' #orderNum' ).val(date.orderNum);
                        modal.find(' #url' ).val(date.url);
                        modal.find(' #target' ).val(date.target);
                        modal.find(' #menuType' ).val(date.menuType);
                        modal.find(' #visible' ).val(date.visible);
                        modal.find(' #perms' ).val(date.perms);
                        modal.find(' #icon' ).val(date.icon);
                        modal.find(' #createBy' ).val(date.createBy);
                        modal.find(' #updateBy' ).val(date.updateBy);
                        modal.find(' #remark' ).val(date.remark);

                    }
                })
            })
        </script>

        <!--弹窗修改值-->
        <script>
            $('#GoUpdate').click(function() {
                function Menu(){
                    this.menuId = $('#menuId').val();
                    this.menuName = $('#menuName').val();
                    this.parentId= $('#parentId').val();
                    this.orderNum = $('#orderNum').val();
                    this.url = $('#url').val();
                    this.target = $('#target').val();
                    this.menuType = $('#menuType').val();
                    this.visible = $('#visible').val();
                    this.perms = $('#perms').val();
                    this.icon = $('#icon').val();
                    this.createBy = $('#createBy').val();
                    this.updateBy = $('#updateBy').val();
                    this.remark = $('#remark').val();
                }

                var menu = new Menu();
                console.log(JSON.stringify(menu));
                $.ajax({
                    type : "post",
                    url: "/system/sysmenu/updataMenu",
                    data: JSON.stringify(menu),//必须
                    contentType : "application/json;charsetset=UTF-8",//必须
                    dataType:"json",//必须
                });
                location.reload();
            })
        </script>

        <!--打开增加菜单按钮-->
        <script>
            $('#menusexampleModal').on('show.bs.modal', function (event){
                var button = $(event.relatedTarget);
                var modal = $(this);
            })
        </script>


        <!--增加菜单提交按钮-->
        <script>
            $('#GoToAddMenu').click(function() {
                function addMenu() {
                    this.roleId = $('#addroleId').val();
                    this.menuId = $('#addmenuId').val();
                    this.menuName = $('#addmenuName').val();
                    this.parentId = $('#addparentId').val();
                    this.orderNum = $('#addorderNum').val();
                    this.url = $('#addurl').val();
                    this.target = $('#addtarget').val();
                    this.menuType = $('#addmenuType').val();
                    this.visible = $('#addvisible').val();
                    this.perms = $('#addperms').val();
                    this.icon = $('#addicon').val();
                    this.createBy = $('#addcreateBy').val();
                    this.updateBy = $('#addupdateBy').val();
                    this.remark = $('#addremark').val();
                }
                var addmenu= new addMenu();
                console.log(JSON.stringify(addmenu));
                $.ajax({
                    type : "post",
                    url: "/system/sysmenu/addmenu",
                    data: JSON.stringify(addmenu),//必须
                    contentType : "application/json;charsetset=UTF-8",//必须
                    dataType:"json",//必须
                });
                location.reload();
            })
        </script>

        <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                console.log("我开始执行了");
                getButton();
            })

            function getButton() {
                $.ajax({
                    url: '/system/sysuser/getMenu',
                    type: "post",
                    contentType: "application/json;charsetset=UTF-8",//必须
                    dataType: "json",//必须
                    success: function (data) {
                        for (var i = 0; i < data.length; i++) {

                            if (data[i].url === "/system/sysmenu/removeByd")
                                $(".menu-group-remove").css('visibility', 'visible');

                            if (data[i].url === "/system/sysmenu/addmenu")
                                $(".menu-group-add").css('visibility', 'visible');

                            if (data[i].url === "/system/sysmenu/updataMenu")
                                $(".menu-group-update").css('visibility', 'visible');
                        }
                    }
                });
            }
        </script>
    </body>
</html>
